<template>
  <div class="g-container">
    <div class="loading">
      <div class="shadow">Hover Me</div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
$color: #e91e63;

.g-container {
  background: #000;
  height: 100%;
  width: 100%;
  display: flex;
  color: #fff;

  .loading {
    position: relative;
    overflow: hidden;
    width: 124px;
    height: 124px;
    margin: auto;
    border-radius: 50%;

    .shadow {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 120px;
      height: 120px;
      line-height: 120px;
      border-radius: 50%;
      font-size: 20px;
      cursor: pointer;
      text-align: center;
      box-shadow: 0 0 0 2px $color;

      &:hover {
        animation: border 0.4s ease infinite;
      }
    }
  }
}

@keyframes border {
  0% {
    box-shadow: 60px -60px 0 2px $color, -60px -60px 0 2px $color,
      -60px 60px 0 2px $color, 60px 60px 0 2px $color, 0 0 0 2px transparent;
  }
  25% {
    box-shadow: 60px -60px 0 2px $color, -125px 0px 0 2px $color,
      -60px 60px 0 2px $color, 60px 60px 0 2px $color, 0 0 0 2px #fff;
  }
  50% {
    box-shadow: 60px -60px 0 2px $color, -125px 0px 0 2px $color,
      0px 125px 0 2px $color, 60px 60px 0 2px $color, 0 0 0 2px #fff;
  }
  75% {
    box-shadow: 60px -60px 0 2px $color, -125px 0px 0 2px $color,
      0px 125px 0 2px $color, 125px 0px 0 2px $color, 0 0 0 2px #fff;
  }
  100% {
    box-shadow: 45px -125px 0 2px $color, -125px 0px 0 2px $color,
      0px 125px 0 2px $color, 125px 0px 0 2px $color, 0 0 0 2px #fff;
  }
}
</style>